<template>
  <el-form :model="data" ref="dialogForm" :rules="rules" label-width="100px" class="demo-ruleForm">
    <el-tabs type="card">
      <el-tab-pane label="图片信息">
        <Images v-if='dataCode' :imageData='data'></Images>
      </el-tab-pane>
      <el-tab-pane label="基本信息">
        <Message v-if='dataCode' :messageData='data'></Message>
        <div>
          <el-form-item label="取消理由"  prop='riskManagementReviewRemark'>
            <el-input type="textarea" v-model="data.riskManagementReviewRemark" auto-complete="off"  :disabled='!dialogSendData.isAdd'></el-input>
          </el-form-item>
          <template v-if="data.status=='-4'">
          <el-form-item label="取消人">
            <el-input type="textarea" v-model="data.riskManagementReviewName" auto-complete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="取消时间">
            <el-input type="textarea" :value="getDate(data.riskManagementReviewTime)" auto-complete="off" disabled></el-input>
          </el-form-item>
          </template>
        </div>
      </el-tab-pane>
    </el-tabs>


    <div style="text-align:center;margin-top:15px;">
      <el-button @click="returnBack">返 回</el-button>
      <el-button v-if="dialogSendData.isAdd" type="primary" @click="submitConfirmForm('dialogForm')">提 交</el-button>
    </div>

  </el-form>
</template>

<script>
  import agentHttp from '@/utils/agentHttp.js' //引用JS
  import {
    require,
    prop
  } from '@/utils/rules.js' //引用JS
  import Images from './com/Images';
  import Message from './com/Message';
  import {
    timestampToTime
  } from '@/utils/index.js' //引用JS
  export default {
    data() {
      return {
        data: {},
        dataCode: false,
        rules: {
          riskManagementReviewRemark: [require('取消理由')],
        },
      }
    },
    methods: {
      seachData() {
        agentHttp.get(`adminApi/admin/car_order_cancel/select_order/${this.dialogSendData.id}`).then((data) => {
          if (data.success) {
            this.data = data.data;
            this.dataCode = true;
          }
        })
      },
      returnBack() {
        this.dialogSendData.dialogFormVisible = false;
      },
      submitConfirmForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //垫资取消
            this.submitAjax();
          } else {
            this.$nextTick(() => {
              this.$message.warning(document.getElementsByClassName('el-form-item__error')[0].innerText);
              return false;
            })
          }
        });

        
      },
      submitAjax() {
        let params = {};
        params.remake = this.data.riskManagementReviewRemark;
        params.orderId = this.dialogSendData.id;
        agentHttp.put(`adminApi/admin/car_order_cancel/cancel`, params).then((data) => {
                if(data.success){
                      this.dialogSendData.dialogFormVisible = false;        
                      this.$message.success(data.data||"取消成功");  
                        this.$emit('Refresh',null);     
                }
        })
      },
      getDate(time){
          return timestampToTime(time)
      }
    },
    created() {
      this.seachData();
    },
    props: ["dialogSendData"],
    components: {
      Images,
      Message
    }
  }
</script>
